<template>
    <div class="bg-[#F8F8F8] p-[20px] items-center mb-[10px]" style="width: 280px;position: relative;margin-right: 10px">
        <div class="flex-1 min-w-0">
            <div style="display: flex;margin-bottom: 10px">
              <div style="margin-right: 5px">
                <img :src="item.model_info.image" style="width: 40px;height: 40px">
              </div>
              <div>
                <div style="font-weight: 600">{{item.model_info.name}}</div>
                <div style="color: #2b2d31">{{item.create_time}}</div>
              </div>
            </div>

            <div class="flex items-center">
                <div class="bg-primary text-white px-[3px] rounded-[3px]">
                    问
                </div>
                <div class="ml-[10px] line-clamp-1">
                    {{ item.ask }}
                </div>
            </div>
            <div
                class="flex items-start mt-[30px]"
                v-for="(text, index) in item.reply"
                :key="index"
            >
                <ReplyItem :text="text" />
            </div>
        </div>
        <div style="display: flex;width: 90px;position: absolute;
    right: 1px;
    bottom: 16px;"
            class="w-[40px] px-[8px] cursor-pointer"
            @click.stop="emit('collect')"
        >
            <div class="mx-auto">
                <Icon
                    name="el-icon-StarFilled"
                    size="24px"
                    color="#FBAE00"
                ></Icon>
            </div>

            <div class="form-tips cancelCollection">取消收藏</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ReplyItem from './reply-itemv1.vue'
const props = defineProps<{
    item: any
}>()
const emit = defineEmits<{
    (event: 'collect'): void
}>()
const itemRef = shallowRef()
</script>
